import React from 'react'
import {connect} from 'dva'
import {Table, Form, Input, Button, Modal, Popconfirm} from 'antd';
import RightContacts from "../../../utils/RightConstants";
import RightBox from "../../../components/commons/RightBox";
const FormItem = Form.Item;

const Placeclearance = ({routes, params, children, location, dispatch, placeclearance}) => {
    const {page, search, list, editModel} = placeclearance;

    const columns = [{
        title: '海关编码',
        dataIndex: 'placeCode',
        key: 'placeCode',
    }, {
        title: '海关名称',
        dataIndex: 'placeName',
        key: 'placeName',
    }, {
        title: '城市',
        dataIndex: 'placeCity',
        key: 'placeCity',
    }, {
        title: '运输方式',
        dataIndex: 'placeTransfertype',
        key: 'placeTransfertype',
    }, {
        title: '报关',
        dataIndex: 'placeClearance',
        key: 'placeClearance',
    }, {
        title: '创建时间',
        dataIndex: 'createtime',
        key: 'createtime'
    }, {
        title: '操作',
        render(record) {
            let editHsButton = <RightBox resource={RightContacts.BASEDATA.BASE_PLACE_EDIT}><a href="#" onClick={
                () => {
                    dispatch({
                        type: 'placeclearance/getPlaceclearanceById',
                        payload: {
                            id: record.id
                        }
                    })
                }
            }>编辑</a>
                <span className="ant-divider"/></RightBox>;
            let deleteHsButton = <RightBox resource={RightContacts.BASEDATA.BASE_PLACE_DELETE}>
                <Popconfirm placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除？'} onConfirm={() => {
                    dispatch({
                        type: 'placeclearance/deletePlaceclearanceById',
                        payload: {
                            id: record.id
                        }
                    });
                }} okText="是" cancelText="否">
                    <a href="#">删除</a>
                </Popconfirm>
            </RightBox>;
            return (
                <span>
                    {editHsButton}
                    {deleteHsButton}
                </span>
            );
        }
    }];

    const handleAdd = function () {
        dispatch({
            type: 'placeclearance/setEditModel',
            payload: {
                showStatus: true,
                title: '创建海关口岸',
                type: 'add',
                form: {
                    placeCode: '',
                    placeName: '',
                    placeCity: '',
                    placeTransfertype: ''
                }
            }
        });
    }

    const SearchForm = Form.create()(({form}) => {
        const {getFieldDecorator, validateFields} = form;

        const handleSearch = function () {
            validateFields((errors, values) => {
                if (errors) {
                    return
                }
                dispatch({
                    type: 'placeclearance/setSearch', payload: {
                        search: {
                            placeCode: values.placeCode,
                            placeName: values.placeName
                        }
                    }
                });
                let newPage = page;
                newPage.page = 1;
                dispatch({
                    type: 'placeclearance/setPage', payload: {
                        page: newPage
                    }
                });
                dispatch({type: 'placeclearance/getPlaceclearanceList'});
            });
        }

        return (
            <div>
                <Form layout="inline" style={{marginBottom: 15}}>
                    <FormItem label={'海关编码'}>
                        {getFieldDecorator('placeCode', {initialValue: search.placeCode})(
                            <Input style={{width: 200}}/>
                        )}
                    </FormItem>
                    <FormItem label={'海关名称'}>
                        {getFieldDecorator('placeName', {initialValue: search.placeName})(
                            <Input style={{width: 200}}/>
                        )}
                    </FormItem>

                    <Button type="primary" icon="search" style={{marginRight: 5}} onClick={handleSearch}>查询</Button>
                    <RightBox resource={RightContacts.BASEDATA.BASE_PLACE_ADD}><Button icon="plus"
                                                                                       onClick={handleAdd}>添加海关口岸</Button></RightBox>
                </Form>
            </div>
        );

    });

    return (
        <div>
            <EditPlaceclearance visible={editModel.showStatus} title={editModel.title}
                                confirmLoading={editModel.confirmLoading}
                                dispatch={dispatch} editModel={editModel}/>

            <SearchForm/>

            <Table rowKey="id" dataSource={list} columns={columns} bordered={false} size={'middle'} pagination={{
                showTotal: total => `共 ${total} 条数据`,
                pageSize: page.size,
                total: page.totalRow,
                showSizeChanger: true,
                current: page.page,
                onShowSizeChange: (current, size) => {
                    let newPage = page;
                    newPage.size = size;
                    newPage.page = 1;
                    dispatch({
                        type: 'placeclearance/setPage', payload: {
                            page: newPage
                        }
                    });
                },
                onChange: (pageNumber, pageSize) => {
                    let newPage = page;
                    newPage.page = pageNumber;
                    dispatch({
                        type: 'placeclearance/setPage', payload: {
                            page: newPage
                        }
                    });
                    dispatch({type: 'placeclearance/getPlaceclearanceList'});
                }
            }}/>
        </div>

    );


}

const EditPlaceclearance = ({visible, title, editModel, dispatch, confirmLoading}) => {

    const formItemLayout = {
        labelCol: {
            xs: {span: 24},
            sm: {span: 6},
        },
        wrapperCol: {
            xs: {span: 24},
            sm: {span: 14},
        },
    };

    let xform = editModel.form;

    const WrappedForm = Form.create()(({form}) => {
        const {getFieldDecorator, validateFields} = form;
        return (
            <Modal maskClosable={false} visible={visible} title={title} confirmLoading={confirmLoading} onCancel={
                () => {
                    dispatch({
                        type: 'placeclearance/setEditModel',
                        payload: {
                            showStatus: false
                        }
                    });
                }
            } onOk={
                () => {
                    validateFields((errors, values) => {
                        if (errors) {
                            return
                        }

                        if (editModel.type === "add") {
                            dispatch({
                                type: 'placeclearance/addPlaceclearance',
                                payload: {
                                    placeCode: values.placeCode,
                                    placeName: values.placeName,
                                    placeCity: values.placeCity,
                                    placeTransfertype: values.placeTransfertype
                                }
                            });
                        } else {
                            dispatch({
                                type: 'placeclearance/updatePlaceclearance',
                                payload: {
                                    id: xform.id,
                                    placeCode: values.placeCode,
                                    placeName: values.placeName,
                                    placeCity: values.placeCity,
                                    placeTransfertype: values.placeTransfertype
                                }
                            });
                        }
                    });
                }
            }>

                <Form>
                    <FormItem
                        {...formItemLayout}
                        label="海关编码"
                        hasFeedback
                    >
                        {getFieldDecorator('placeCode', {
                            rules: [{
                                required: true, message: '请输入海关编码',
                            }],
                            initialValue: xform.placeCode
                        })(
                            <Input maxLength="20"/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="海关名称"
                        hasFeedback
                    >
                        {getFieldDecorator('placeName', {
                            rules: [{
                                required: true, message: '请输入海关名称',
                            }],
                            initialValue: xform.placeName
                        })(
                            <Input maxLength="30"/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="城市"
                        hasFeedback
                    >
                        {getFieldDecorator('placeCity', {
                            rules: [{
                                required: true, message: '请输入城市',
                            }],
                            initialValue: xform.placeCity
                        })(
                            <Input maxLength="20"/>
                        )}
                    </FormItem>
                    <FormItem
                        {...formItemLayout}
                        label="运输方式"
                        hasFeedback
                    >
                        {getFieldDecorator('placeTransfertype', {
                            rules: [{
                                required: true, message: '请输入运输方式',
                            }],
                            initialValue: xform.placeTransfertype
                        })(
                            <Input maxLength="20"/>
                        )}
                    </FormItem>


                </Form>
            </Modal>
        );
    });


    return (
        <WrappedForm/>
    );
}

export default connect(({placeclearance}) => ({placeclearance}))(Placeclearance)
